<template>
  <div>
    provide 和 inject 提供依赖注入:
    <p>非响应式: {{theme}}</p>
    <p>响应式: {{themeRef}}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, watchEffect, ref, onMounted } from "vue";
import { ThemeSymbol, ThemeSymbolRef } from "../../utils/constant";
export default defineComponent({
  name: "c-api-provide-inject",
  props: {
    point: String,
  },
  setup(props, context) {
    /**
     * inject 接受一个可选的的默认值作为第二个参数。如果未提供默认值，并且
     * 在 provide 上下文中未找到该属性，则 inject 返回 undefined。
     */
    const theme = inject(ThemeSymbol, "light" /* optional default value */);

    /**
     * @description 可以使用 ref 来保证 provided 和 injected 之间值的响应
     * @description 如果注入一个响应式对象，则它的状态变化也可以被侦听
     */
    const themeRef = inject(
      ThemeSymbolRef,
      ref("light") /* optional default value */
    );

    onMounted(() => {
      console.log("onMounted!");
      // console.log(context)
      // context.emit("change-second-level", props.point);
    });
    watchEffect(() => {
      console.log(`theme set to: ${themeRef.value}`);
      console.log("API for ProvideInject", props);
    });
    return { theme, themeRef };
  },
});
</script>

<style lang="less">
</style>
